<%@ page pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>navbar</title>
</head>
<body>
<script src="assets/js/vue.js"></script>
<!--<script src="assets/js/router.js"></script>-->
<div id="navbar">
<div class="breadcrumb">
    <div class="breadcrumb-box">
        <span class="menu-text">{{name}}</span>
        <span class="divider" v-show="this.subName != ''">/</span>
        <span class="sub-menu-text" v-show="this.subName != ''">{{subName}}</span>
    </div>
    <div class="logout-box">
        <span @click="logout" class="logout-btn">退出登录</span>
    </div>
</div>

</div>
<script>
    const navbar=new Vue({
        el:'#navbar',
        data: {
            route: [
                [
                    {
                        name: '首页',
                        icon: 'main',
                        url: 'main',
                        sub: []
                    },
                    {
                        name: '预约挂号',
                        url: 'appointment',
                        icon: 'appointment',
                        sub: [
                            {
                                name: '在线预约',
                                icon: 'online_appointm'
                            },
                            {
                                name: '预约管理',
                                icon: 'appointm_mana'
                            }
                        ]
                    },
                    {
                        name: '个人中心',
                        url: 'profile',
                        icon: 'profile',
                        sub: []
                    }
                ],
                [
                    {
                        name: '首页',
                        icon: 'main',
                        url: 'main',
                        sub: []
                    },
                    {
                        name: '预约管理',
                        url: 'appointmentMana',
                        icon: 'appointm_mana',
                        sub: [
                            {
                                name: '挂号处理',
                                icon: 'online_appointm'
                            },
                            {
                                name: '已完成挂号',
                                icon: 'appointm_mana'
                            }
                        ]
                    },
                    {
                        name: '门诊信息',
                        url: 'examination',
                        icon: 'examination',
                        sub: []
                    },
                    {
                        name: '个人中心',
                        url: 'profile',
                        icon: 'profile',
                        sub: []
                    }
                ],
                [
                    {
                        name: '首页',
                        icon: 'main',
                        url: 'main',
                        sub: []
                    },
                    {
                        name: '系统管理',
                        url: 'system',
                        icon: 'appointm_mana',
                        sub: [
                            {
                                name: '公告管理',
                                icon: 'online_appointm'
                            },
                            {
                                name: '留言板管理',
                                icon: 'appointm_mana'
                            },
                            {
                                name: '挂号类型管理',
                                icon: 'appointm_mana'
                            },
                            {
                                name: '挂号科室管理',
                                icon: 'appointm_mana'
                            }
                        ]
                    },
                    {
                        name: '医生管理',
                        url: 'doctors',
                        icon: 'doctor',
                        sub: []
                    },
                    {
                        name: '用户管理',
                        url: 'users',
                        icon: 'doctor',
                        sub: []
                    },
                    {
                        name: '预约管理',
                        url: 'appointmentMana',
                        icon: 'doctor',
                        sub: []
                    },
                    {
                        name: '门诊信息',
                        url: 'examination',
                        icon: 'examination',
                        sub: []
                    },
                    {
                        name: '个人中心',
                        url: 'profile',
                        icon: 'profile',
                        sub: []
                    }
                ],
            ],
            routes: [
                {
                    name: '首页',
                    icon: 'main',
                    url: 'main',
                    sub: []
                }
            ],
            name: '',
            subName: ''
        },
        methods: {
            menuText() {
                let path = window.location.pathname;
                for(let item of this.routes) {
                    if(path.indexOf(item.url) != -1) {
                        console.log(item)
                        this.name = item.name;
                        break;
                    }
                }
                this.name = ''
            },
            submenuText() {
                console.log("submenuText")
                let path = window.location.pathname;
                for(let item of this.routes) {
                    if(path.indexOf(item.url) != -1) {
                        console.log(item)
                        this.name = item.name;
                        let query = window.location.search;
                        console.log(query)
                        if(item.sub.length > 0 && query!='') {

                            let index = Number(query.split('tab=')[1]);
                            this.subName = item.sub[index].name;

                        }
                        else {
                            this.subName='';
                        }
                        break;
                    }
                }
            },
            logout() {
                localStorage.removeItem('user');
                ELEMENT.Message({
                    message: '退出成功！',
                    type: 'success'
                });
                window.location = "login.html"
            }
        },
        created() {
            let userD = JSON.parse(localStorage.getItem('user'))
            if(userD!=null) {
                console.log(this.route)
                if(userD.role=='doctor') {
                    this.routes = this.route[1]

                }
                else if(userD.role=='admin') {
                    this.routes =  this.route[2]
                }
                else {
                    this.routes =  this.route[0]
                }
                console.log(this.routes)
                this.submenuText()
                // this.routes = routes[this.role[userD.role]]
            }

        },
        computed: {

        }
            })
</script>
<style>
    @import "assets/css/base.css";

    #navbar .breadcrumb {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1vw 2vw 1.5vw;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.12),0 0 3px 0 rgba(0,0,0,.04);
        font-size: 1vw;
    }
    #navbar .breadcrumb .menu-text {

    }
    #navbar .breadcrumb .breadcrumb-box {
        display: flex;
        justify-content: start;
        align-items: center;
    }
    #navbar .breadcrumb .divider {
        color: #97a8be;
        padding: 0 0.6vw;
    }
    #navbar .breadcrumb .sub-menu-text {
        color: #97a8be;
    }
    #navbar .logout-btn:hover {
        color: #C80000;
    }
</style>
</body>
</html>